<template>
  <div class="cesium">
    <div class="cesium-container" id="cesiumMap"></div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { Viewer } from 'cesium'

export default {
  name: 'CesiumViewer',
  setup() {
    onMounted(() => {
      const viewer = new Viewer('cesiumMap')
      console.log('Viewer created:', viewer)
    })
  }
}
</script>

<style>
.cesium {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
}

.cesium-container {
  position: relative;
  height: calc(100vh - 64px);
  width: 100%;
}

.cesium-container .cesium-viewer-bottom {
  display: none;
}
</style>